<template>
	<!--优惠券 补发列表 开始-->
	<el-form :inline="true"
	         :model="formInline"
	         class="demo-form-inline">
		<!--车牌号 优惠劵  查询 行 开始-->
		<el-row>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="4"
			        style="padding-right:15px ;">
				<el-input v-model="plateNum"
				          placeholder="请输入车牌号"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">优惠券号:</p>
			</el-col>
			<el-col :span="4"
			        style="padding-right:15px ;">
				<el-input v-model="num"
				          placeholder="请输入优惠券号"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1">
				<el-button type="primary"
				           @click="resRoleQuery"
				           size="small">查询</el-button>
			</el-col>
		</el-row>
		<!--车牌号 优惠劵  查询 行 结束-->
		<!--表格-->
		<el-table :data="tableData.dataList"
		          border
		          style="width: 100%"
		          height="460">
			<el-table-column prop="applyDate"
			                 :formatter="formatTime"
			                 label="补发时间"
			                 width="250"
			                 align="center">
			</el-table-column>
			<el-table-column prop="num"
			                 label="优惠劵号"
			                 width="250">
			</el-table-column>
			<el-table-column prop="name"
			                 label="所属活动"
			                 width="300">
			</el-table-column>
			<el-table-column prop="gift"
			                 label="赠送礼品"
			                 width="250">
			</el-table-column>
			<el-table-column prop="plateNum"
			                 label="车牌号"
			                 width="200">
			</el-table-column>
			<el-table-column prop="contactName"
			                 label="车主姓名"
			                 width="200">
			</el-table-column>
			<el-table-column prop="contactPhone"
			                 label="联系电话"
			                 width="150"
			                 align="right"
			                >
			</el-table-column>

		</el-table>
		<!--页面翻页 开始-->
		<el-pagination small
		               @size-change="handleSizeChange"
		               @current-change="handleCurrentChange"
		               :current-page="CurentPage"
		               :page-sizes="page.pageSizes"
		               :page-size="page.pageSize"
		               layout=" total,prev, pager, next"
		               :total="tableData.total">
			<!--页面翻页 结束-->
		</el-pagination>
		<!--表格 结束-->
	</el-form>
	<!--优惠券 补发列表 结束-->
</template>
<script>
export default {
	data: function () {
		return {
			//车牌号
			plateNum: '',
			//优惠劵号码
			num: '',
			//优惠劵 号 后面的  查询按钮
			user: '',
			//申请列表
			formInline: {
				user: '',
				region: ''
			},
			//页码数001
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//申请列表 下面的表格
			tableData: [{
				name: '销售—20160313山东润通团购活动',
				gift: '本券仅限本车在山东润通维修（不含事故维修）保养使用，销售总监签字盖章后生效；每次限用一张，不兑现、不转让、不找零、不开发票、材料不外带、遗失不补、与车号不符无效；在结算前出示，不与其它优惠打折活动同时使用；逾期作废，涂改无效，自领取之日起三年内有效。',
				contactName: '王琦（润通）',
				applyDate: '17-3-1 17:51:52',
				contactPhone: '13791029789',
				plateNum: '鲁AU0423',
				num: '1479389956349845300'
			}],
			//翻页 功能

			//表单名称
			formLabelAlign: {
				name: '',
				region: '',
				type: ''
			},

		}
	},
	methods: {
		//加载列表
		resRoleQuery: function () {
			//debugger;
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/coupon/reissuePage', //url 补发列表
				params: { //发送的参数
					//提取 车牌号 的数据
					plateNum: this.$data.plateNum,
					//提取 优惠劵号
					num: this.$data.num,
					applyUid: this.$data.user, //绑定的 查询条件
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {
				debugger;
				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})
		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.resRoleQuery();
		}, //分页传参 结束\

		//日期转换  applyDate
		formatTime: function (row, column) {
			if (row.applyDate == "" || row.applyDate == null) { return "" };
			return this.moment(Number(row.applyDate)).format("YYYY-MM-DD HH:mm:ss");
		},

		//申请列表 查询按钮
		onSubmit() {
			console.log('submit!');
		},

		//申请补发界面
		handleClick: function (tab, event) {
			console.log(tab, event);
		},

		//补发 按钮
		onSubmit: function () {
			console.log('submit!');
		},
		//自动加载  独立组件
		//自动加载 组件创建时自动运行 开始
		//原理  ：一般可以在created函数中调用ajax获取页面初始化所需的数据。
	},
	created: function () {//实现效果 点击“查询”按钮 实现函数的调用
		this.resRoleQuery();//将要  调用的 函数名称
	} //自动加载 组件创建时自动运行 结束
}
</script>